<template>
  <el-container class="setting-center_mall-info-setting_commercial-tenant">
    <el-main>
      <el-card shadow="never" class="commercial-tenant-info-container">
        <div class="commercial-tenant-container">
          <div class="right-container">
            <el-card shadow="never" class="selectCard searchColumn">
              <el-form label-position="right" label-width="6rem">
                <el-row :gutter="40">
                  <el-col :span="6">
                    <el-form-item label="商户编号：">
                      <el-input v-model="searchParams.code" placeholder="请输入" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="商户名称：">
                      <el-input v-model="searchParams.name" placeholder="请输入" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="经营模式：">
                      <el-select v-model="searchParams.manage">
                        <el-option v-for="item in businessModelList" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="营业状态：">
                      <el-select v-model="searchParams.bizStatus">
                        <el-option v-for="item in businessStatusList" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>

                </el-row>
                <el-row :gutter="40">
                  <el-col :span="6">
                    <el-form-item label="经营品牌：">
                      <el-input v-model="searchParams.brandName" placeholder="请输入" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="业态：">
                      <el-cascader
                        v-model="searchParams.formatId"
                        :options="formatList"
                        :props="props"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <search-button :default-params="searchParams" @refreshParams="refreshParams" @getList="getList1" />
                  </el-col>
                </el-row>

              </el-form>
            </el-card>
            <el-card
              shadow="never"
              class="commercia-tenant-list-title tableCard"
            >
              <vxe-toolbar
                :custom="{ icon: 'el-icon-s-operation' }"
                :refresh="{ query: getList }"
                print
              >
                <template v-slot:buttons>
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-plus"
                    @click="openModal('', false)"
                  >添加</el-button>
                  <el-button size="small" type="primary">ERP导入</el-button>
                </template>
              </vxe-toolbar>
              <vxe-table
                ref="xTree"
                border
                stripe
                resizable
                highlight-hover-row
                :loading="loading"
                :auto-resize="true"
                :data="commercialTenantList"
                height="500"
                :print-config="{}"
              >
                <vxe-table-column type="seq" align="center" width="50" title=" " />
                <vxe-table-column
                  field="insideArea"
                  width="140"
                  align="center"
                  title="logo"
                  slots="default"
                >
                  <template slot-scope="scope">
                    <img :src="scope.row.logo" alt="" class="logoImg">
                  </template>
                </vxe-table-column>
                <vxe-table-column
                  field="name"
                  width="250"
                  align="left"
                  title="商户名称"
                />
                <vxe-table-column
                  field="brandName"
                  title="品牌名称"
                  align="left"
                  min-width="200"
                />
                <vxe-table-column
                  field="manageName"
                  title="经营模式"
                  align="center"
                  width="100"
                />
                <vxe-table-column
                  field="formatIdName"
                  title="所属业态"
                  min-width="180"
                />
                <vxe-table-column
                  field="bizStatusName"
                  title="营业状态"
                  width="80"
                />
                <!-- <vxe-table-column field="publishStatus" width="80" align="center" title="状态">
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.bizStatus" :inactive-value="0" :active-value="1" active-text inactive-text @change="changeState(scope)" />
                  </template>
                </vxe-table-column> -->
                <vxe-table-column
                  title="操作"
                  fixed="right"
                  width="140"
                  align="center"
                  slots="default"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="openModal(scope.row.id, true)">查看</el-button>
                    <el-button type="text" size="mini" @click="openModal(scope.row.id, false)">编辑</el-button>
                    <el-button type="text" size="mini" @click="delShop(scope.row.id)">删除</el-button>
                  </template>
                </vxe-table-column>
              </vxe-table>
              <vxe-pager
                :current-page.sync="searchParams.pageNum"
                :page-size.sync="searchParams.pageSize"
                :total="total"
                :layouts="[
                  'PrevJump',
                  'PrevPage',
                  'Number',
                  'NextPage',
                  'NextJump',
                  'FullJump',
                  'Total',
                ]"
                @page-change="getList()"
              />
            </el-card>
          </div>
        </div>
      </el-card>
    </el-main>
    <el-dialog
      title="商户信息"
      :visible.sync="dialogVisible"
      width="70%"
      :close-on-click-modal="false"
      append-to-body
    >
      <commercialTenantEdit
        v-if="dialogVisible"
        :build-id="buildId"
        :floor-id="floorId"
        :parent-id="parentId"
        :diabled-edit="diabledEdit"
        @refresh="refresh"
        @close="close"
      />
    </el-dialog>
  </el-container>
</template>
<script>
import commercialTenantEdit from './components/commercialTenantEdit'
import SearchButton from '@/components/SearchButton'
import {
  getShopsPageList,
  changeStatus,
  delShop, getVersionstatTreeList
} from '@/api/tenement'
import { searchAllDictionaries } from '@/api/public'
export default {
  components: {
    commercialTenantEdit,
    SearchButton
  },
  data() {
    return {
      searchParams: {
        storeNo: '',
        code: '',
        name: '',
        brandName: '',
        bizStatus: '',
        manage: '',
        pageNum: 1,
        pageSize: 20
      },
      options: [],
      formatList: [],
      loading: false,
      commercialTenantList: [],
      total: 0,
      rules: {
        name: [{ required: true, message: '请填写详细地址', trigger: 'blur' }],
        city: [{ required: true, message: '请选择所在城市', trigger: 'blur' }]
      },
      title: '蜂网电子商务',
      diabledEdit: true,
      params: {
        name: '上海市闵行区天山西路123号'
      },
      dialogVisible: false,
      floorId: '',
      buildId: '',
      parentId: '',
      shopTypeList: [],
      businessModelList: [],
      businessStatusList: []
    }
  },
  created() {
    this.getTreeInfo()
    this.getList()
    this.getDicInfo('shop_type')
    this.getDicInfo('business_model')
    this.getDicInfo('business_status')
  },
  methods: {
    refreshParams(params) {
      this.searchParams = params
      this.getList()
    },
    getTreeInfo() {
      getVersionstatTreeList({
        type: '1',
        parentId: '0'
      }).then(response => {
        response.unshift({ id: ' ', name: '全部', children: null })
        this.formatList = response
      })
    },
    getList1() {
      this.searchParams.pageNum = 1
      this.getList()
    },
    delShop(id) {
      if (this.$demoUser.checkUser()) {
        alert('演示账号，不能执行此操作')
        return
      }
      this.$confirm('请确认是否删除多经?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delShop({ id }).then((res) => {
          this.getList()
          this.$message.success('删除成功！')
        })
      })
    },
    close() {
      this.dialogVisible = false
    },
    refresh() {
      this.dialogVisible = false
      this.getList()
    },
    openModal(id, bool) {
      this.diabledEdit = bool
      this.parentId = id
      this.dialogVisible = true
    },
    changeState(scope) {
      this.commercialTenantList[scope.seq - 1].bizStatus =
        scope.row.bizStatus === 1 ? 0 : 1
      changeStatus({
        id: scope.row.id,
        status: scope.row.bizStatus === 1 ? 0 : 1
      }).then((response) => {
        this.commercialTenantList[scope.seq - 1].bizStatus =
          scope.row.bizStatus === 1 ? 0 : 1
        this.$message.success(
          scope.row.bizStatus === 0 ? '禁用成功' : '启用成功'
        )
      })
    },
    getList() {
      getShopsPageList({ ...this.searchParams, build: this.buildId, floor: this.floorId }).then((response) => {
        this.commercialTenantList = JSON.parse(
          JSON.stringify(response.records)
        )
        this.total = response.total
      })
    },
    getDicInfo(type) {
      searchAllDictionaries({
        type: type
      }).then((response) => {
        if (type === 'business_model') {
          this.businessModelList = response
          this.$nextTick(() => {
            this.businessModelList.unshift({ label: '全部', value: '' })
          })
        } else if (type === 'business_status') {
          this.businessStatusList = response
          this.$nextTick(() => {
            this.businessStatusList.unshift({ label: '全部', value: '' })
          })
        } else if (type === 'shop_type') {
          this.shopTypeList = response
          this.$nextTick(() => {
            this.shopTypeList.unshift({ label: '全部', value: '' })
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.setting-center_mall-info-setting_commercial-tenant {
  .commercial-tenant-info-container {
    width: 100%;
  }
  .map-info {
    width: 100%;
    height: 300px;
  }
  .commercial-tenant-container {
    display: flex;
    .right-container {
      width: 100%;
      .commercia-tenant-list-title {
        margin-bottom: 20px;
        .el-card__body {
          padding: 0;
        }
      }
    }
    .logoImg {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
